<template>
	<view class="main">
		<u-image :show-loading="false" :src="zpImgUrl+'top-bg.png'" mode="widthFix" class="top-bg"></u-image>
		<!-- <u-navbar :is-back="false" :border-bottom="false" :background="uNavbarBG">
			
		</u-navbar> -->
		<!-- <view class="slot-wrap">
			<view class="search-wrap">
				<u-search placeholder="请输入商品名字" :disabled="true" @click="search" bg-color="#ffffff" :showAction="false"
					height="56"></u-search>
			</view>

		</view> -->
		<view class="content">
			<view class="u-grid u-grid-box">
				<u-grid col="4" :border="false">
					<u-grid-item v-for="(item, index) in gridList" :key="index" @click="gridItemClick(item.type,index)">
						<u-image width="70" height="70" :src="item.icon"></u-image>
						<view class="grid-text">{{ item.title }}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="news-plate">
				<view class="news-icon"><u-image width="48" height="48" src="/static/horn.png"></u-image></view>
				<view class="news-word">贵通源葛根黄精饮料上架了</view>
				<view class="right-arrow"><u-icon name="arrow-right" size="24" color="#C0C0C0"></u-icon></view>
			</view>

			<view class="floor-box" style="display: none;">
				<view class="hot-bg">
					<u-image width="690" height="466" :src="zpImgUrl+'hot-bg.png'"></u-image>
				</view>
				<view class="list-floor" v-if="item.goodsList&&item.goodsList.length>0&&index==0"
					v-for="(item, index) in listFloor" :key="index">

					<view class="head-title">
						<view class="head-left"><u-image width="196rpx" height="58rpx" mode="aspectFill"
								:src="zpImgUrl+'hot-icon.png'"></u-image>

						</view>
						<!-- <view class="more red_more" @tap="seeMore(3)">全部<u-icon name="arrow-right" color="#fff"
								size="22"></u-icon></view> -->
					</view>

					<scroll-view scroll-x>
						<view class="item" @click="
									$u.route('/pages/productDetail/productDetail', {
										id: items.id
									})
								" v-for="(items, indexs) in item.goodsList" :key="indexs">
							<u-image width="218rpx" height="218rpx" border-radius="20" mode="aspectFill"
								:src="items.goodsMainPhoto"></u-image>
							<view class="info">
								<view class="g-title">{{ items.goodsName }}</view>
							</view>
							<view class="money">
								<text>￥</text>
								{{ items.salePrice.toFixed(2) }}
							</view>

						</view>
					</scroll-view>
				</view>
			</view>


			<u-gap></u-gap>
			<view class="head-title">
				<view class="head-left">
					<view class="title"><u-image width="158rpx" height="54rpx" mode="aspectFill"
							src="/static/cate_tit_b.png"></u-image></view>
				</view>
				<!-- <view class="more grey_more" @tap="seeMore(5)">全部<u-icon name="arrow-right" color="#a3a3a3" size="22"></u-icon>
				</view> -->
			</view>
			<view class="list goods-list">
				<template v-if="loadListStatus == 'emptyList'">
					<u-empty margin-top="30" mode="list"></u-empty>
				</template>
				<template v-else>
					<block v-for="(item, index) in listFloor" :key="index" v-if="index==1">

						<navigator :url="`/pages/productDetail/productDetail?id=${good.id}&mainGoodsType=5`"
							class="item" v-for="(good,i) in item.goodsList" :key="i">
							<view style="width: 334rpx;"><u-lazy-load height="334rpx" img-mode="aspectFill"
									border-radius="20" :image="good.goodsMainPhoto"></u-lazy-load></view>

							<view class="info">
								<view class="name">

									{{ good.goodsName }}
								</view>
								<view class="share-red">
									{{ good.rebateMhb}}分红值
								</view>

								<view class="price-box">

									<view class="price">
										券
										<text>{{ good.salePrice}}</text>
									</view>
									<view class="oldPrice">￥{{good.originalPrice}}</view>

								</view>
							</view>
						</navigator>
					</block>

				</template>
			</view>
			<!-- <u-loadmore margin-top="30" :status="status" /> -->
		</view>
		<u-back-top :icon-style="{ width: '44px', height: '44px' }"
			:custom-style="{ 'background-color': 'transparent' }" :icon="appletImgUrl+'btn_UpToTop.png'"
			:scroll-top="scrollTop"></u-back-top>

	</view>
</template>

<script>
	import {
		appletImgUrl,
		zpImgUrl
	} from "@/common/config.js"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	let navBackgroundColor = 'transparent',
		pageNo = 1;
	export default {

		data() {
			return {
				appletImgUrl: appletImgUrl,
				zpImgUrl: zpImgUrl,
				tabBarState: false,
				showIcon: true,
				listFloor: "",
				gridList: [{
						title: '甄品商城',
						url: '/pages/other/goodList/goodList',
						type: "3",
						icon: '/static/home_menu/index_menu_a.png'
					},
					{
						title: '平价爆品',
						url: '#',
						isLogin: true,
						type: "5",
						icon: '/static/home_menu/index_menu_b.png'
					},
					{
						title: '服务中心',
						url: '/pages/user/serviceCenter/serviceCenter',
						type: "4",
						icon: '/static/home_menu/index_menu_c.png'
					},

					{
						title: '我的账户',
						url: '/pages/user/myAccount/myAccount',
						type: "2",
						icon: '/static/home_menu/index_menu_d.png'
					},


				],
				status: 'loading',
				productList: '',
				loadListStatus: '',
				tip: false,
				uTabOffsetTop: 44 + uni.getSystemInfoSync().statusBarHeight,
				opacity: 0,
				uNavbarBG: {
					// backgroundColor: 'rgba(254,70,102,0)',
					backgroundImage: 'linear-gradient(90deg, rgba(255, 55, 104, ' + 0 + '), rgba(252, 97, 97, ' + 0 + '))'
				},
				scrollTop: 0,
				current: 0,
				imageURL: this.imageURL,
				userInfo: {},
				userType: null
			};
		},
		computed: {

		},
		watch: {

		},
		onReady() {

		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
			if (this.showIcon) {
				this.showIcon = false;
			}
			this.$u.debounce(() => {
				this.showIcon = true;
			}, 500);
			var opacity = 0,
				maxNumber = this.uTabOffsetTop;
			if (scrollTop <= maxNumber) {
				opacity = scrollTop / maxNumber;
			} else {
				opacity = 1;
			}
			if (opacity == this.opacity) return;
			this.opacity = opacity;
		
			this.uNavbarBG.backgroundImage = 'linear-gradient(90deg, rgba(255, 55, 104, ' + opacity + '), rgba(252, 97, 97, ' + opacity + '))';
		},
		onShow() {
		  if(uni.getStorageSync('userInfo')){
			  this.userInfo=uni.getStorageSync('userInfo');
			  // console.log("缓存",this.userInfo)
			  this.userType=this.userInfo.userType;
		  }else{
			  this.getUserInfo();
		  }
		  
		},
		onLoad() {
			console.log('首页')
			this.init();
		},
		onReachBottom() {
		},
		onPullDownRefresh() {
			pageNo = 1;
			this.loadListStatus = '';
			this.status = 'loadmore';
			this.init();
		},
		methods: {
			...mapMutations(['login']),
			getUserInfo(){
				let that=this;
				this.$u.get('user/info').then(userInfo => {
					// console.log("用户信息",userInfo)
					that.userInfo=userInfo;
					that.userType=userInfo.userType;
					uni.setStorageSync('userInfo', userInfo)
				})
			},
			init() {
				const self = this;
				this.messagePageNo = 1;
				this.firstGoodsClassId = '';

				this.$u.post('appfloormanagement/listFloor', {type: 2}).then(res => {
						res.forEach(item => {
							if (item.goodsList && item.goodsList.length > 0) {
								item.goodsList.forEach(items => {
									let transformationArray = items.goodsMainPhoto.split(',');
									items.goodsMainPhoto = this.imageURL + transformationArray[0];
								});
							}

						});
						this.listFloor = res;
						this.$nextTick(() => {
							this.$u.getRect('#list-title-bg').then(res => {
								this.listOffsetTop = res.top;
							});
						});
						// console.log(this.listFloor)
					});
			},
			search() {
				this.$u.route('/pages/other/search/search');
			},
			gridItemClick(type, index) {
				if (this.userInfo) {
					if (this.gridList[index].title == '服务中心' && this.userType != 2) {
						uni.showToast({
							title: '您还不是服务中心身份',
							icon: 'none'
						});
						return;
					} else {
						this.$u.route(this.gridList[index].url);
					}
				} else {
					uni.showToast({
						title: '请先登录！',
						icon: 'none'
					});
					this.$u.route('/pages/user/login/login')
				}
			},
			seeMore(type) {
				uni.navigateTo({
					url: '/pages/purchase/productList/productList?mainGoodsType=' + type
				});
			}
		}
	};
</script>

<style lang="scss">
	.floor-box {
		margin-top: 40rpx;
		position: relative;

		.hot-bg {
			margin-left: 30rpx;
		}

		.list-floor {
			margin-top: 20rpx;
			position: absolute;
			width: 690rpx;
			left: 30rpx;
			top: 0;

			&:first-child {
				margin-top: 0;
			}

			.title {
				margin-left: 10rpx;
				font-size: 30rpx;
				font-weight: bold;
			}

			scroll-view {
				white-space: nowrap;
				margin-top: 30rpx;
				// height: 380rpx;

				.item {
					// height: 360rpx;
					// box-shadow: 0px 5rpx 25rpx rgba(0, 0, 0, 0.1);
					position: relative;
					border-radius: 20rpx;
					vertical-align: top;

					.info {
						white-space: normal;
						width: 210rpx;
						padding: 10rpx 10rpx;

						>view {

							font-size: 26rpx;
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
						}

					}

					.money {
						font-size: 32rpx;
						color: #FF1C60;
						padding-left: 10rpx;
						padding-right: 10rpx;
						font-weight: 600;

						text {
							font-size: 24rpx;
							font-weight: normal;
						}
					}

					display: inline-block;
					margin-left: 20rpx;

					&:first-child {
						margin-left: 30rpx;
					}

					&:last-child {
						margin-right: 20rpx;
					}
				}
			}
		}
	}









	page {}

	.content {
		// padding-bottom: 30rpx;
	}

	.list {
		padding: 0 30rpx;
		// min-height: 74vh;

		.bg {
			display: flex;
			justify-content: center;
		}

		.item {

			box-shadow: 0px 0 12px 1px rgba(203, 203, 202, 0.2);
			margin-top: 20rpx;
			border-radius: 20rpx;

			.info {
				flex: 1;
				padding: 20rpx 0;

				.price-box {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.btn {
						color: #bdbdbd;
						padding: 4rpx 6rpx;
						background: #f3f3f3;
						font-size: 20rpx;
						border-radius: 32px 0px 0px 32px;
					}
				}

				.price {
					font-size: 24rpx;
					color: #ff4e47;
					font-weight: 600;

					text {
						font-size: 32rpx;
					}
				}

				.oldPrice {
					text-decoration: line-through;
					font-size: 24rpx;
					margin-left: 20rpx;
				}

				.sales {
					color: #aaaaaa;
					font-size: 22rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 358rpx;
					overflow: hidden;
				}

				.tag {
					color: #fff;
					display: flex;
					justify-content: space-between;
					width: 300rpx;
					padding: 3rpx 15rpx;
					font-size: 26rpx;
					background: url('~@/static/product-list-tag-bg.png') no-repeat center / 100% 100%;

					&:first-child {
						margin-bottom: 10rpx;
					}

					text {
						color: #ff4d46;
					}
				}

				.name {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					margin-bottom: 10rpx;
					padding-left: 10rpx;
					padding-right: 10rpx;
					font-size: 24rpx;
					overflow: hidden;
					max-width: 334rpx;

					text {
						color: #fff;
						font-size: 26rpx;
						padding: 2rpx 10rpx;
						margin-right: 10rpx;
						background: linear-gradient(90deg, #ff3768, #fc6161);
						border-radius: 6rpx;
					}
				}
			}
		}
	}

	.top-bg {

		width: 100%;
		height: auto;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-main-color;
	}

	.u-swiper {
		margin: 15rpx 0;
	}

	.navbar-right {
		margin-right: 24rpx;
	}

	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}

	.navbar-left {
		margin-left: 24rpx;
	}

	.left-item {
		// margin: 0 12rpx;
	}

	.right-item {
		// margin: 0 12rpx;
		position: relative;
		color: #ffffff;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		position: fixed;
		top: 96rpx;
	}

	.u-grid-box {
		width: calc(100% - 60rpx);
		margin-left: 30rpx;
		border-radius: 20rpx;
		padding: 10rpx;
		margin-bottom: 30rpx;
	}



	.goods-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.goods-list .item:nth-child(odd) {
		margin-right: 20rpx;
	}

	.head-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;

		.red_more {
			background: linear-gradient(to right, #FFA24D, #FE381B);
			width: 104rpx;
			height: 40rpx;
			font-size: 22rpx;
			line-height: 40rpx;
			text-align: center;
			color: #fff;
			border-radius: 40rpx;
		}

		.grey_more {
			background-color: #e9e9e9;
			width: 104rpx;
			height: 40rpx;
			font-size: 22rpx;
			line-height: 40rpx;
			text-align: center;
			border-radius: 40rpx;
		}

		.head-left {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}


	}

	.news-plate {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-left: 30rpx;
		margin-right: 30rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;

		.news-word {
			line-height: 48rpx;
			font-size: 28rpx;
		}
	}

	.main {
		background-color: #F5F5F5;
	}

	.share-red {
		display: inline-block;
		background: linear-gradient(to right, #FFE794, #EABF26);
		font-size: 22rpx;
		padding: 6rpx 14rpx;
		border-radius: 10rpx;
		color: #000;
		margin-bottom: 10rpx;
	}
</style>